<template>
  <div class="select-city">
    <div class="title">疫情期间出行防疫政策</div>
    <van-field
      v-model="fromCity"
      is-link
      readonly
      label="出发城市"
      placeholder="请选择所在地区"
      @click="show = true"
    />
    <van-popup v-model="show" round position="bottom">
      <van-cascader
        v-model="cascaderValue"
        title="请选择所在地区"
        :options="options"
        @close="show = false"
        @finish="onFinish"
      />
    </van-popup>

    <van-field
      v-model="toCity"
      is-link
      readonly
      label="到达城市"
      placeholder="请选择所在地区"
      @click="show2 = true"
    />
    <van-popup v-model="show2" round position="bottom">
      <van-cascader
        v-model="cascaderValue2"
        title="请选择所在地区"
        :options="options"
        @close="show2 = false"
        @finish="onFinish2"
      />
    </van-popup>
 <div class="btn">
      <van-button square type="primary" block @click="goTravel"
      >点击查询</van-button
    >
 </div>
  </div>
</template>

<script>
import Secret from "../api/mysign";
export default {
  data() {
    return {
      show: false,
      show2: false,
      fromCity: "", //出发
      toCity: "", //到达
      fromCode: "", //来自标识
      toCode: "", //去到的标识
      cascaderValue: "",
      cascaderValue2: "",
      // 选项列表，children 代表子选项，支持多级嵌套
      options: [
        {
          text: "浙江省",
          value: "330000",
          children: [{ text: "杭州市", value: "330100" }],
        },
        {
          text: "江苏省",
          value: "320000",
          children: [{ text: "南京市", value: "320100" }],
        },
      ],
    };
  },
  methods: {
    // 全部选项选择完毕后，会触发 finish 事件
    onFinish({ value, selectedOptions }) {
      this.show = false;
      this.fromCode = value;
      this.fromCity = selectedOptions.map((option) => option.text).join("/");
    },
    onFinish2({ value, selectedOptions }) {
      this.toCode = value;
      this.show2 = false;
      this.toCity = selectedOptions.map((option) => option.text).join("/");
    },
    //点击出行按钮---
    goTravel() {
      //路由跳转
      this.$router.push({
        path: "/travelCity",
        query: {
          from: this.fromCode,
          to: this.toCode,
        },
      });
    },
  },
  mounted() {
    this.$api.TravelCitys({
        key:Secret.key
    }).then((res) => {
      console.log(res.data); //province_id: "1", province: "安徽", citys
      let arr = [];
      if (res.data.result) {
        res.data.result.forEach((ele) => {
          let temp = {};
          temp.text = ele.province;
          temp.value = ele.province_id;
          temp.children = [];
          ele.citys.forEach((child) => {
            let wrap = {};
            wrap.text = child.city;
            wrap.value = child.city_id;
            temp.children.push(wrap);
          });
          arr.push(temp);
        });
      }
      this.options = arr;
    });
  },
};
</script>

<style scoped>
.select-city {
  padding-top: 0.2rem;
  background: #fff;
}
.title {
  font-size: 0.32rem;
  font-weight: bold;
  padding-left: 0.24rem;
}
.btn{
  padding:0.3rem;
}
</style>